<!--
 * @Date: 2025-04-13 17:06:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-19 00:55:08
 * @FilePath: /admin/vue/src/views/admin/home/components/bar.vue
-->
<script setup lang="ts">
const { domRef, updateOptions } = useEcharts(
  () => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        color: '#8378ea',
        showBackground: true,
        barGap: 100,
        itemStyle: {
          borderRadius: [40, 40, 0, 0],
        },
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }),
  { onRender() {} },
)
</script>
<template>
  <div ref="domRef" class="h-[400px] w-full"></div>
</template>

<style lang="scss"></style>
